@import 'form/html-editor.less';
@import 'form/calendar.less';

// -webkit-text-stroke: 1px rgba(255,255,255,0.5);

.aj-btn {
	min-height: 30px;
	font-size: .8rem;
	//line-height: 100%;
	padding: .4em 2.3em;
	margin: 10px auto;
	color: #333;
	letter-spacing: .3em;
	border-radius: 4px;
	border: 1px solid #ccc;
	border-bottom-color: #B4B4B4;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
	background-color: lightgray;
	background-repeat: repeat-x;
	transition: background-image 0.5s linear 1s;
	outline: 0;
	.gradient (top , rgba(255, 255, 255, 1) 0% , rgba(239, 239, 239, 1) 60% , rgba(225, 223, 226, 1) 100%);
	
	img {
		vertical-align: middle;
	}

	&:hover {
		color: black;
		border-color: lighten(black, 65%);
	}

	&:active {
		box-shadow: inset 0 3px 5px rgba(0, 0, 0, .2);
		border-color: lighten(black, 55%);
	}

	&:focus {
		border-color: lighten(black, 60%);
	}

	&:hover {
		background-position: 0px -10px;
	}
}

.aj-input, .aj-select {
	min-height: 29px;
	font-size: .9rem;
	border: 1px solid #abadb3;
	border-radius: 3px;	
	box-shadow: 1px 2px 3px #e5e5e5 inset;
	box-sizing: border-box;
	background-color: white;
	transition: border-color ease-in-out 200ms;
	outline: 0;
	&:hover , &:focus {
		border-color: lighten(black, 45);
	}
}

.aj-input {
	padding: 4px;
	vertical-align: middle;
	color: #333;
	letter-spacing: 1px;
}

// 禁止控件
.aj-disable {
	cursor: not-allowed;
	opacity: .35;
	box-shadow: none;
	background-image: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.aj-select {
	padding: 1px 4px;
	-moz-appearance: none;
	-webkit-appearance: none;
	background:white url("") no-repeat right;
}

// 多选列表框的边框
.aj-select[multiple] {
	border: 1px solid #abadb3;
	padding: 2px;
	
	&:hover , &:focus {
		border-color: lighten(black, 45);
	}
}

.aj-page-captcha {
	input {
		width: 80%;
	}

	img {
		cursor: pointer;
		margin-left: 2%;
		height: 26px;
		width: 60px;
		vertical-align: middle;
	}
}

.aj-form {
	min-width: 400px;
	overflow: hidden;
	
	@media screen and (max-width: 480px) {
		dt {
			width: 40% ! important;
			float: initial ! important;
		}
	}
	
	&.fixed-width {
		margin: 5% auto;
		max-width: 82%;
		width:460px;
	}
	
	dl {
		float: left;
		overflow: hidden;
		box-sizing: border-box;
		padding: 0 3%;
		line-height: 36px;
		width: 100%;
		margin: 1em 0;
		dt {
			min-width: 110px;
			max-width:30%;
			float: left;
			text-align: right;
			box-sizing: border-box;
			padding-right: 4%;
			font-weight: bold;
			letter-spacing: 1px;
			min-height: 10px;
		}

		dd {
			float: left;
			max-width:70%;
			position: relative;
		}
	}

	input[type=text], input[type=password], textarea,input[type=time], input[type=url], 
	input[type=date], input[type=datetime], input[type=email], input[type=number],
	input[type=range], input[type=search] {
		.aj-input;
	    
		&:focus {
			border-color: gray;
			//background-color: #e9e9e9;
			outline:0;
			box-shadow:0 5px 16px rgba(103, 122, 141, .2)
		}
	}
	
	input[type=submit] , button {
		.aj-btn;
	}
    
	input[type=submit], input[type=file] {
		cursor: pointer;
	}

	input[type="checkbox"], input[type="radio"], label {
		vertical-align: middle;
	}
	
	select {
		.aj-select;
		min-width: 100px;
	}
	
	.aj-china-area select {
		width: 150px;
	}

	&.btns{
		text-align:center;
		width:100%;
	}
	
	.tips, .state {
		display: none;
		margin-left: 10px;
		border: 1px solid gray;
		padding: 3px 3px;
		position: relative;
		strong {
			border-style: solid;
			height: 0;
			line-height: 0;
			width: 0;
			font-size: 0;
			position: absolute;
			border-width: 5px;
			&.arrow_1 {
				left: -11px;
				top: 7px;
				border-color: white gray white white;
			}

			&.arrow_2 {
				left: -9px;
				top: 7px;
				border-color: transparent white transparent transparent;
			}
		}
	}

	.state {
		color: red;
		font-weight: bold;
	}

	.errHighlight {
		border-color: red ! important;
		color: red;
	}
	
	.error {
    	border-color: red!important;
	}
	
	.error-message {
	    color: red;
		padding-left: 1%;
		position: absolute;
	    right: -100px;
	    top: 0;
	}
}

.aj-btnsHolder{
	text-align: center;
	padding: 2% 0;
	button {
		.aj-btn;
		margin-right: 3%!important;
	}
}

.user-form input[type=text] , .user-form input[type=password] , .user-form textarea {
	border-radius: 0 ! important;
	padding: 8px 5px ! important;
	&:focus {
		border-color: @mainColor ! important;
	}
}

.admin-entry-form {
	& > form {
		margin: 0 5%;
		border: 1px solid #e3e3e3;
		overflow: hidden;
		& > div {
			padding: 1% 2%;
			border-bottom: 1px solid #e3e3e3;
			&:last-child {
				border-bottom: 0;
			}
		}

		& > div:nth-child(even) {
			border-top: 1px solid white;
			background: #f5f5f5;
		}

		div.label {
			display: inline-block;
			min-width: 70px;
			text-align: center;
		}

		input[type=text], input[type=email], input[type=number], textarea {
			.aj-input;
		}

		textarea {
			min-height: 90px;
		}

		.htmlEditor {
			width: 90%;
			margin: 0 auto;
			display: inline-block;
		}
	}

	.sub, .sub-2  {
		color: gray;
		font-size:.9rem;
		transition: color linear 300ms;
	}

 	.sub{
		margin: 1% 0 0 15%;
 	}
	
	.sub-2{
		display:inline-block;
	}
	
	form>div:hover .sub, form>div:hover .sub-2 {
		color: black;
	}
	
	.buttons {
		text-align: center;
	}
	.error-message {
		padding-left:1%;
		color:red;
	}
	
	.ajaxjs-admin-info-btns {
		.aj-btnsHolder;
	}
	
	.htmlEditor-row {
		&>.label {
			vertical-align: top;
		}
		&>div:last-child {
			display: inline-block; 
			width: 90%;
		}
	}
}


.aj-json-form {
	form {
		margin:2% auto;
		width:80%;
		border: 1px solid #e3e3e3;
		overflow: hidden;
		
		& > div {
			padding: 1% 2%;
			border-bottom: 1px solid #e3e3e3;
			width:100%;
			&:last-child {
				border-bottom: 0;
			}
			
			& > div{
				display: inline-block;
				
				.sub  {
					color: gray;
					font-size:.8rem;
					transition: color linear 300ms;
					margin: 1% 0 0 0;
				}

				&:hover .sub {
					color: black;
				}
			}
			div.label {
				display: inline-block;
				width: 30%;
				text-align: center;
			}
			div.input {
				display: inline-block;
				width: 68%;
				vertical-align: middle;
			}
		}

		& > div:nth-child(even) {
			border-top: 1px solid white;
			background: #f5f5f5;
		}


		input[type=text], input[type=email], input[type=number], textarea {
			.aj-input;
		}
		
		select{
			.aj-select;
			min-width: 200px;
		}

		textarea {
			min-height: 90px;
		}

		.htmlEditor {
			width: 90%;
			margin: 0 auto;
			display: inline-block;
		}
		.aj-form-html-editor .editorBody iframe, .aj-form-html-editor .editorBody textarea {
			height:320px;
		}
		
		.aj-form-html-editor ul.toolbar > li {
			.cleanHTML, .bg-19 {
			    display: none;
			}
		}

		.required-note{
			color:red;
		}
		.label {
			width: 15%;
		}
	
		input[type=text] , textarea {
			//width:80%;
		}
		
		&>div{
			padding:2% 0!important;
		}
	}
}

.aj-xhr-upload {
	.pseudoFilePicker label {
		& > div {
			border: 1px solid lightgray;
			border-radius: 3px;
			text-align: center;
			color: gray;
			cursor: pointer;
			font-size: .8rem;
			padding: 10px;
			width: 100px;
			height: 70px;
			& > div {
				font-size: 2rem;
			}
		}
	}

	button {
		.aj-btn;
	}
}

.aj-xhr-upload {
	display: flex;
	align-items: center;
	word-break: break-all;
	& > div {
		margin: 5% 1%;
	}

	.upload_img_perview {
		margin: 10px;
		max-width: 180px;
		max-height: 160px;
	}
}

.aj-xhr-upload {
	.pseudoFilePicker label {
		& > div {
			border: 1px solid lightgray;
			border-radius: 3px;
			text-align: center;
			color: gray;
			cursor: pointer;
			font-size: .8rem;
			padding: 10px;
			width: 100px;
			height: 70px;
			& > div {
				font-size: 2rem;
			}
		}
	}

	button {
		.aj-btn;
	}
}

.aj-xhr-upload {
	display: flex;
	align-items: center;
	word-break: break-all;
	& > div {
		margin: 5% 1%;
	}

	.upload_img_perview {
		margin: 10px;
		max-width: 180px;
		max-height: 160px;
	}
}

